<template>
  <view class="content">
    <view class="header-block">
      <view class="pd-20">
        <u-search :placeholder="searchType == 'department' ? '请输入部门名' : '请输入用户名'" v-model="keyword" @search="search()" @custom="search()"></u-search>
      </view>
    </view>
    <view class="pd-20 mt-100">
      <view v-if="JSON.stringify(showList) != '[]'" class="list-block pd-20">
        <scroll-view :scroll-y="true" style="height: 880rpx">
          <view v-for="(item, index) in showList" :key="index" @click="changeDepartment(item, index)">
            <view class="item-block pt-20 pb-20">
              <view class="item-title">{{ item.name }}</view>
              <image
                v-if="item.hasChildren"
                class="arrow-right"
                src="../static/images/arrow-right.png"
                @click.stop="chooseDepartment(item, index)"
              ></image>
            </view>
            <view v-if="checkIndex == index && checkState">
              <view
                v-if="JSON.stringify(userList) != '[]'"
                class="user-list-block pd-20"
              >
                <view
                  v-for="(child, ind) in userList"
                  :key="ind"
                  :class="[child.logo == '1' ?'ontclickn':'user-item-block']"
                  @click.stop="chooseUser(child)"
                  >
                  {{ child.nickname }}
                </view>
              </view>
              <view v-else class="user-empty-block">该部门下暂无人员</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view v-else class="empty-block">
        <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
      </view>
      <view class="page-block mt-20">
        <!-- <u-button :disabled="!reduceState" class="button" :customStyle="{ width: '300rpx', padding: '0', margin: '0' }" @click="changePage('reduce')">上一页</u-button> -->
        <!-- <u-button :disabled="!addState" class="button" type="primary" :customStyle="{ width: '300rpx', padding: '0', margin: '0' }" @click="changePage('add')">下一页</u-button> -->

        <view v-if="JSON.stringify(headerList) != '[]'" class="header-list">
          <view class="header-item" @click="changeShowList()">
            <view class="mr-10">全部</view>
            <u-icon name="arrow-right" color="#3C9CFF" size="30rpx"></u-icon>
          </view>
          <view
            class="header-item"
            v-for="(item, index) in headerList"
            :key="index"
            @click="changeShowList(index)"
          >
            <view class="mr-10">{{ item.label }}</view>
            <u-icon name="arrow-right" color="#3C9CFF" size="30rpx"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getDepartmentListApi,
  getUserListByDepartmentApi,
  getDepartmentNewListApi,
} from "@/apis/work/common.js";
import { getUserInfoApi } from "@/apis/auth/index.js";
  import {getUserInfo   } from '@/utils/auth.js'
export default {
  data() {
    return {
      disable:[],
      paramsKey: "",
      keyword: "",
      searchType: "department",
      list: [],
      showList: [],
      searchList: [],
      searchState: false,
      page: 1,
      pageSize: 10,
      minNumber: 0,
      maxNumber: 10,
      reduceState: true,
      addState: true,

      checkIndex: -1,
      checkState: false,
      userList: [],
      headerList: [],
      chooseItem: {
        deptId: "",
        deptName: "",
        peoId: "",
        peoName: "",
      },
      departmentState: false,
    };
  },
  onLoad(options) {
    console.log(options)
    if(options.disable){
      this.disable = JSON.parse(options.disable)
    }
    if (options.paramsKey) this.paramsKey = options.paramsKey;
    if (options.departmentState) this.departmentState = true;
   let userInfo = getUserInfo()
      if(userInfo.company.id) {
        this.getDepartmentNewList({id: userInfo.company.id})
      } else {
        uni.showToast({ title: '当前登录用户没有机构信息', icon: 'none' })
      }
  },
  methods: {
    getDepartmentNewList: function (params) {
      uni.showLoading({title: '数据加载中', mask: true })
      getDepartmentNewListApi(params).then((res) => {
        this.list = res
        this.showList = JSON.parse(JSON.stringify(res))
        uni.hideLoading()
      }).catch((err) => console.warn(err))
    },
    search: function () {
      if (this.keyword) {
        let list = []
        this.showList.map((item) => {
          if (item.name.indexOf(this.keyword) > -1) list.push(item)
        });
        this.showList = list
        this.searchState = true;
      } else {
        this.showList = this.headerList.length > 0 ? this.headerList[this.headerList.length - 1].list : this.list
        this.searchState = false
      }
      this.checkIndex = -1
      this.checkState = false
    },
    changeDepartment: function (item, index) {
      // if(this.departmentState) {
      //   const wxCurrPage = getCurrentPages()
      //   const wxPrevPage = wxCurrPage[wxCurrPage.length - 2]
      //   wxPrevPage.$vm.params[`${this.paramsKey}DeptIdName`] = item.name
      //   wxPrevPage.$vm.params[`${this.paramsKey}DeptId`] = item.id
      //   uni.navigateBack()
      // } else {
      getUserListByDepartmentApi({ deptId: item.id })
        .then((res) => {
          Object.assign(this.chooseItem, {
            deptId: item.id,
            deptName: item.name,
          });
          this.userList = res;
          if(this.disable.length != 0 ){
             console.log('有数据')
            this.userList.forEach(element => {
              this.disable.forEach(dax => {
                if(this.paramsKey == "guardianId" && dax.keys)return;
                if(element.id == dax.id){ 
                  console.log('没有key')
                  this.$set(element, 'logo', '1')
                }
              })
            });
          }
          let checkIndex = JSON.parse(JSON.stringify(this.checkIndex));
          if (checkIndex == index) {
            this.checkState = !this.checkState;
          } else {
            this.checkState = true;
          }
          this.checkIndex = index;
        })
        .catch((err) => console.warn(err));
      // }
    },
    chooseDepartment: function(item, index) {
      this.headerList.push({ label: item.name, index, list: item.children })
      this.showList = JSON.parse(JSON.stringify(item.children))
      this.userList = []
      this.checkState = false
    },
    changeShowList: function (index) {
      if (index != null) {
        this.showList = this.headerList[index].list;
        this.headerList.splice(index + 1, this.headerList.length - index);
      } else {
        this.showList = JSON.parse(JSON.stringify(this.list));
        this.headerList = [];
      }
      this.checkIndex = -1;
      this.checkState = false;
    },
    chooseUser: function (item) {
      console.log(item)
      if(item.logo){
        uni.showToast({ title: '当前人员已选择', icon: 'none' })
        return;
      }
      const wxCurrPage = getCurrentPages();
      const wxPrevPage = wxCurrPage[wxCurrPage.length - 2];
      if(this.paramsKey == "guardianId"){
        wxPrevPage.$vm.disable.splice(1,1,item)
      }
      if(this.paramsKey == "licensor"){
        wxPrevPage.$vm.disable.splice(2,1,item)
      }
      if(this.paramsKey == "signer"){
        wxPrevPage.$vm.disable.splice(3,1,item)
      }
      if(this.paramsKey == "inCharge"){
        wxPrevPage.$vm.disable.splice(4,1,item)
      }
      if(this.paramsKey == "mainInCharge"){
        wxPrevPage.$vm.disable.splice(5,1,item)
      }
      wxPrevPage.$vm.params[this.paramsKey] = item.nickname;
      wxPrevPage.$vm.params[`${this.paramsKey}Id`] = item.id;
      uni.navigateBack();
    },
  },
};
</script>

<style>
page {
  background-color: #efefef;
}
</style>

<style lang="scss" scoped>
.content {
  .header-block {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 999;
  }
  .list-block {
    border-radius: 10rpx;
    background-color: #ffffff;
    .item-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #efefef;
      .item-title {
        width: 90%;
        font-size: 30rpx;
        line-height: 46rpx;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .arrow-right {
        width: 36rpx;
        height: 36rpx;
      }
    }
    .item-block:last-child {
      border-bottom: none;
    }
    .ontclickn{
      // pointer-events: none;
      padding: 5rpx 20rpx;
      margin: 10rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
      border: 2rpx solid #000000;
      color: #000000;
      border-radius: 6rpx;
    }
    .user-list-block {
      display: flex;
      flex-wrap: wrap;
      background-color: #efefef;
      border-bottom-left-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
      .user-item-block {
        padding: 5rpx 20rpx;
        margin: 10rpx;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 40rpx;
        border: 2rpx solid #3c9cff;
        color: #3c9cff;
        border-radius: 6rpx;
      }
    }
    .user-empty-block {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      font-size: 32rpx;
      line-height: 46rpx;
      color: #999999;
      background-color: #efefef;
      border-bottom-left-radius: 10rpx;
      border-bottom-right-radius: 10rpx;
    }
  }
  .page-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .button {
      width: 200rpx;
    }

    .header-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .header-item {
        padding: 5rpx 0 5rpx 20rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        font-size: 26rpx;
        line-height: 36rpx;
        color: #3c9cff;
        background-color: #cccccc;
        border-radius: 6rpx;
        display: flex;
        align-items: center;
      }
      .header-item:last-child {
        margin-right: 0;
      }
    }
  }
  .empty-block {
    padding-top: 300rpx;
  }
}
</style>
